<template>
    <div class="dashboard-container">
        <!-- 顶部操作栏 -->
        <div class="search">
            <el-form ref="form" :model="params" label-position="top" size="medium">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="城市">
                            <el-select 
                                filterable 
                                clearable
                                v-model="params.cityId" 
                                placeholder="请选择" 
                                style="width: 100%;"
                                @change="handleChangeCity"
                            >
                                <el-option v-for="item,index in cityList" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县">
                            <el-select 
                                filterable 
                                clearable
                                v-model="params.areaId" 
                                placeholder="请选择" 
                                style="width: 100%;"
                                @change="handleChangeArea"
                            >
                                <el-option v-for="item,index in areaList" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="街道" >
                            <el-select clearable filterable v-model="params.streetId" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item,index in jdList" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="成交时间">
                            <el-date-picker
                                v-model="Time"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="handleChangeTime('Time')"
                                style="width: 100%;"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="楼盘名称搜索">
                            <el-input clearable placeholder="请输入" v-model="params.communityName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 操作按钮 -->
        <div class="opt">
            <el-button type="primary" plain @click="handleSearch">
                <i class="el-icon-search"></i>
                查询
            </el-button>
        </div>

        <!-- 内容栏 -->
        <div class="body">
            <!-- 列表 -->
            <el-table :data="list" v-loading="loading">
                <el-table-column label="ID" prop="id" width="100"></el-table-column>
                <el-table-column label="城市" prop="cityName" width="100"></el-table-column>
                <el-table-column label="案例名称" prop="name">
                    <template slot-scope="{row}">
                        {{ row.community.name  }} 
                    </template>
                </el-table-column>
                <el-table-column label="楼层" prop="f1" ></el-table-column>
                <el-table-column label="建筑物面积" prop="f2" ></el-table-column>
                <el-table-column label="房地合一成交单价" prop="f3" ></el-table-column>
                <el-table-column label="成交总价(万元)" prop="f4"></el-table-column>
                <el-table-column label="评估对象" prop="typeName" width="120px"></el-table-column>
                <el-table-column label="交易情况" prop="tradeTypeName" width="120px"></el-table-column>
                <el-table-column label="操作" width="100px">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="handleDetail(row.detail)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageIndex+1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="params.pageCount"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog
            title="案例详情"
            :visible.sync="dialogVisible" 
            :close-on-click-modal="false"
            @close="dialogVisible=false"
            width="500px"
        >
            <div v-for="(item, index) in detail" :key="index" style="height: 30px;line-height: 30px;">
                <span style="text-align:right; width: 120px; margin-right: 20px;display: inline-block; overflow: hidden; vertical-align: top;">{{ item.label }}:</span> {{ item.value }}
            </div>
            <div style="padding-top: 20px;">
                <el-button size="mini" @click="dialogVisible=false">关闭</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>
  
<script>
import { targetGetList } from '@/api/target';
import { commonGetAreaList, commonGetCityList } from '@/api/common'
import moment from 'moment'
import { transfromData } from '@/utils/tools';
import { 
    TARGET_TYPE_LIST, 
    TransactionSituationList, 
} from '@/utils/common'

export default {
    name: 'dataTarget',
    data(){
        return {
            TARGET_TYPE_LIST,
            TransactionSituationList,
            params: {
                provinceId: 11,  //默认浙江省
                cityId: '', //城市id
                areaId: '',// 区县id
                streetId: '', //街道id
                name: '',
                communityName: '',//楼盘名
                pageIndex: 0,
                pageCount: 10,
                propertyTypes: [1],
                tradeTypes: [],
                minCreateTime: '',
                maxCreateTime: '', //创建时间
                maxTime: '',
                minTime: '', //成交时间
            },
            createTime: [],
            Time: [],
            cityList: [],
            areaList: [],
            jdList: [],
            loading: false,
            list: [],
            total: 0,
            cityListLabel: [],
            dialogVisible: false,
            detail: []
        }
    },
    async mounted(){
        let data = await commonGetCityList({ geoLevel: 2, provinceId: 11 });
        this.cityList = data;
        this.cityListLabel = data.map(item=>{
            return { label: item.name, value: item.id }
        })
        this.handleSearch();
    },
    methods:{
        //点击获取详情
        handleDetail(detail){
            this.dialogVisible = true;
            this.detail = detail;
        },
        //修改创建时间区间
        handleChangeTime(name){
            if(this[name]){
                if(name=='createTime'){
                    this.params.minCreateTime = moment(this.createTime[0]).valueOf();
                    this.params.maxCreateTime = moment(this.createTime[1]).valueOf();
                }else if(name =='Time'){
                    this.params.minTime = moment(this.Time[0]).valueOf();
                    this.params.maxTime = moment(this.Time[1]).valueOf();
                }
                
            }else{
                if(name=='createTime'){
                    this.params.minCreateTime = this.params.maxCreateTime = null
                }else if(name =='Time'){
                    this.params.minTime = this.params.maxTime = null
                }
                
            }
        },
        //修改搜索条件
        handleSearch(){
            this.params.pageIndex = 0;
            this.getData();
        },
        //选择了区县
        async handleChangeArea(val){
            if(val){
                this.jdList = this.areaList.filter(item=>item.id==val)[0].streets;
            }else{
                this.jdList = [];
            }
            
            this.params.streetId = '';
        },
        //改变城市
        async handleChangeCity(val){
            if(val){
                // 请求区县信息
                let data = await commonGetAreaList({ geoLevel: 4, cityId: val })
                this.areaList = data;
            }else{
                this.areaList = [];
            }
            //清空之前的区县选择
            this.params.areaId = '';
            this.params.streetId = '';
            
        },
        //加载列表数据
        async getData(){
            let params = JSON.parse(JSON.stringify(this.params))
            this.loading = true
            if(params.propertyTypes.length==0){
                delete params.propertyTypes 
            }
            if(params.tradeTypes.length==0){
                delete params.tradeTypes
            }
            let data = await targetGetList(params)
            this.loading = false;
            this.total = data.totalCount;
            this.list = data.list.map(item=>{
                item.cityName = transfromData(this.cityListLabel, item.cityId)
                item.typeName = transfromData(TARGET_TYPE_LIST, item.propertyType)
                item.tradeTypeName = transfromData(TransactionSituationList, item.tradeType)
                item.timeName = item.time!=0?moment(item.time).format('YYYY-MM-DD'):'';
                item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                item.detail = item.fields.map(fItem=>{
                    let value = '';
                    if(fItem.field.valueType==1){
                        // 代表日期类型
                        value = fItem.longValue ? moment(fItem.longValue).format('YYYY-MM-DD'): '';
                    }
                    if(fItem.field.valueType==0){
                        //代表数字
                        value = fItem.decimalValue
                    }
                    if(fItem.field.valueType==2){
                        //代表字符串
                        value = fItem.stringValue
                    }
                    if(fItem.field.name=='楼层'){
                        item.f1 = value;
                    }
                    if(fItem.field.name=='建筑物面积'){
                        item.f2 = value;
                    }
                    if(fItem.field.name=='房地合一成交单价'){
                        item.f3 = value;
                    }
                    if(fItem.field.name=='成交总价'){
                        item.f4 = value;
                    }
                    return { label: fItem.field.name, value }
                })
                return item;
            });
        },
        // 修改每页数量
        handleSizeChange(val){
            this.params.pageIndex = 0;
            this.params.pageCount = val;
            this.getData();
        },
        // 切换分页
        handleCurrentChange(val){
            this.params.pageIndex = val - 1;
            this.getData();
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
      margin: 30px;
      position: relative;
      .opt{
        margin-bottom: 10px;
      }
      .page{
        padding: 20px 0;
        text-align: center;
      }
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
}
</style>
  